<template>
    <div id="home">
        <div class="nickname-block">
            <div>
                <label for="nick-name">输入昵称：</label>
            </div>
            <div>
                <input id="nick-name" type="text" v-model="input_nick_name" />
            </div>
            <div>
                <button @click="JoinChat">进入聊天室</button>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
#home {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    > .nickname-block {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        margin: 2em;
        padding: 1em;

        > div + div {
            margin-top: 8px;
        }
    }
}
</style>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import DateFormat from "dateformat";
import { EnterResult } from "@/types/socket-io-model"

@Component({
    components: {
        //HelloWorld,
    }
})
export default class Home extends Vue {
    input_nick_name = "";
    is_auto_submit_nick_name = true;

    mounted() {
        this.input_nick_name = this.$store.state.user_info.nick_name;
    }

    async JoinChat() {
        let res = await this.$socketHelper.api("set-nick-name", { nick_name: this.input_nick_name });
        //console.log({res});
        this.$store.commit("user_info/set_nick_name", this.input_nick_name);
        this.$store.dispatch("auth/chat_enter");
        this.$router.push("chat");
    }
}
</script>
